.fireworks {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
}
.fireworks-item {
    left: 20%;
    width: @size / 2;
    height: @size / 2;
    z-index: 1;
    position: absolute;
    .power {
        left: 50%;
        top: 50%;
        width: 2px;
        height: 5px;
        opacity: 0;
        background-color: #fff;
        position: absolute;
        animation: power 2s;
    }
    .spark {
        top: 50%;
        left: 50%;
        width: 50%;
        height: 25%;
        .radius();
        opacity: 0;
        position: absolute;
        animation: spark 2s ease-out;
        animation-delay: 2s;
        transform-origin: 0 0;
        .spark-child {
            right: 0;
            width: 4px;
            height: 4px;
            .radius();
            background-color: #fff;
            position: absolute;
        }
    }
}
@keyframes power {
    0% {
        top: @size;
        opacity: 1;
    }
    100% {
        top: 50%;
        opacity: 1;
    }
}
@keyframes spark {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 50%;
        height: 25%;
        opacity: 0;
    }
}